/**
 * Sample React Native App By Wyh
 * Created by wyh on 15/12/23.
 */
'use strict';

import React, {
  StyleSheet,
  Text,
  View,
  Animated,
  Image,
  PixelRatio,
} from 'react-native';


import ViewPager from 'react-native-viewpager';

const WIDTH = require('Dimensions').get('window').width;
const HEIGHT = require('Dimensions').get('window').height;

import {QMBtnContainer} from 'qmkit';


const IMG_LIST = [
  require('img/guide1.png'),
  require('img/guide2.png'),
  require('img/guide3.png'),
  require('img/guide4.png')
];


const Guide = React.createClass({


  getInitialState(){
    const dataSource = new ViewPager.DataSource({
      pageHasChanged: (p1, p2) => p1 != p2
    });

    return({
      dataSource: dataSource.cloneWithPages(IMG_LIST),
      scrollValue: new Animated.Value(0)
    });

  },


  render() {
    console.log('this.state===', this.state);
    return (
      <ViewPager
        dataSource={this.state.dataSource}
        renderPage={this._renderPage}
        isLoop={false}/>
    );
  },


  _renderPage(img, pageId) {
    if (pageId == '3') {
      return (
        <View style={styles.container} key={pageId}>
          <Image style={styles.img} source={img}/>
          <View style={styles.btnWrapper}>
            <Image style={styles.slogan} source={require('img/slogan.png')}/>
            <QMBtnContainer
              onPress={this.props.onPress}
              style={styles.btn}>
              <Text style={styles.text}>立即登录</Text>
            </QMBtnContainer>
          </View>
        </View>
      );
    }
    return (
      <View style={styles.container} key={pageId}>
        <Image style={styles.img} source={img}/>
      </View>
    );

  },

});


const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  img: {
    width: WIDTH,
    height: HEIGHT
  },
  btnWrapper: {
    position: 'absolute',
    width: WIDTH,
    justifyContent: 'center',
    alignItems: 'center',
    top: HEIGHT - 200,
    left: 0,
    right: 0,
    backgroundColor: 'transparent'
  },
  btn: {
    width: WIDTH - 200,
    alignItems: 'center',
    justifyContent: 'center',
    height: 48,
    borderWidth: 1 + 1 / PixelRatio.get(),
    borderColor: '#fff',
    borderRadius: 3,
    backgroundColor: 'transparent'
  },
  text: {
    color: '#FFF',
    fontWeight: 'bold',
    fontSize: 18
  },
  slogan: {
    height: 23,
    width: 229,
    marginBottom: 20,
  },
  indicators: {
    flex: 1,
    alignItems: 'center',
    position: 'absolute',
    bottom: 10,
    left: 0,
    right: 0,
    backgroundColor: 'transparent',
  }
});

module.exports = Guide;